<template>
	<div class="main-context">
		<el-steps :active="elStep" class="steps" finish-status="success" simple>
			<el-step title="选择商品"></el-step>
			<el-step title="选择店铺"></el-step>
		</el-steps>
		
		<div v-show="elStep === 1" class="el-container">
			<el-container>
				<!--类目树-->
				<el-aside style="width: 350px"
				          class="el-aside-superior"
				          v-loading="loading"
				          element-loading-text="拼命加载中"
				          element-loading-spinner="el-icon-loading"
				          element-loading-background="rgba(0, 0, 0, 0.8)">
					<div class="tree-title">类目树管理</div>
					<el-tree ref="elTree"
					         :data="categoryData"
					         :default-expand-all="true"
					         :highlight-current="true"
					         :props="defaultProps"
					         :expand-on-click-node="false"
					         node-key="id"
					         @node-click="handleNodeClick"
					         show-checkbox>
					</el-tree>
				</el-aside>
				
				<!--商品主列表-->
				<el-container class="two-container">
					<!--工具栏-->
					<el-header class="header">
						<div class="header-tool">
							<el-form :inline="true" :model="filters" :size="size" ref="filters">
								<el-row class="search-input">
                  <el-form-item label="商品名称：">
									<el-input v-model="filters.chineseName" placeholder="商品名称" clearable></el-input>
								</el-form-item>
                </el-row>
								<el-row class="search-button noBoder">
                  <el-form-item>
									<kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()"/>
								</el-form-item>
								<el-form-item>
									<kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm()"/>
								</el-form-item>
                </el-row>
							</el-form>
						</div>
					</el-header>
					
					<!--表格内容栏-->
					<el-main class="main">
						<cy-table
								:size="size"
								:highlightCurrentRow="true"
								:content="pageResult"
								:columns="filterColumns"
								:totalSize="totalSize"
								:showBatchDelete="false"
								:showDeleteOperation="false"
								:showEditOperation="false"
								:showDetailOperation="false"
								:showOperation="false"
								@findPage="findPage"
								@selectionChange="selectionChange"
								ref="CyTable">
						</cy-table>
						<!--下一步-->
						<el-button type="primary" icon="el-icon-right" @click="nextStep" style="float: left;">下一步</el-button>
					</el-main>
				</el-container>
			
			</el-container>
		</div>
		
		<div v-show="elStep === 2" style="margin: 20px">
			<!--商家分页-->
			<el-row>
				<el-form :inline="true" :model="filters1" :size="size" ref="filters">
					<el-form-item>
						<el-input v-model="filters1.storeName" placeholder="店铺名称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findMerchant()"/>
					</el-form-item>
					<el-form-item>
						<kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetMerchant()"/>
					</el-form-item>
				</el-form>
				
				<!--表格内容栏-->
				<el-table :data="pageResult1"
				          :size="size"
				          :stripe="true"
				          style="width: 100%"
				          v-loading="loading1"
				          element-loading-text="拼命加载中"
				          element-loading-spinner="el-icon-loading"
				          element-loading-background="rgba(0, 0, 0, 0.8)"
				          @selection-change="handleSelectionChangeMerchant"
				          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
					<el-table-column type="selection" align="center" width="55"></el-table-column>
					<el-table-column prop="merchantName" label="所属商家" sortable></el-table-column>
					<el-table-column prop="storeName" label="门店名称" sortable></el-table-column>
					<el-table-column prop="storeCode" label="门店编码" sortable></el-table-column>
					<el-table-column prop="storeType" label="门店分类" :formatter="typeFormatter" sortable></el-table-column>
					<el-table-column prop="reviewStatus" label="审核状态" :formatter="statusFormatter" sortable></el-table-column>
					<el-table-column prop="createTime" label="注册时间" sortable></el-table-column>
				</el-table>
				
				<!--分页栏-->
				<div class="toolbar" style="padding:10px;">
					<el-pagination
							layout="total, prev, pager, next, jumper,sizes"
							@current-change="refreshPageRequest"
							@size-change="handleSizeChange"
							:current-page="pageRequest1.pageNum"
							:page-size="pageRequest1.pageSize"
							:total="totalSize1"
							style="float:right;"
							:page-sizes="[10, 50, 100, 150]"></el-pagination>
				</div>
			</el-row>
			
			<!--分配-->
			<el-row>
				<el-button type="primary" icon="el-icon-back" @click="previousStep" style="text-align: center">上一步</el-button>
				<el-button type="primary" icon="el-icon-s-shop" @click="stepFinish" :disabled="selectStore.length === 0" style="text-align: center">分配</el-button>
			</el-row>
		</div>
	
	</div>
</template>

<script>
import CyTable from '@/views/Core/ProductTable'
import KtButton from '@/views/Core/KtButton'
import {format} from '@/utils/datetime'

export default {
	
	components: {
		CyTable,
		KtButton
	},
	
	data() {
		return {
			loading: true,
			loading1: true,
			size: 'small',
			elStep: 1,
			categoryData: [],
			defaultProps: {
				label: 'name',
				children: 'categoryList'
			},
			
			filters: {
				categoryId: '',
				chineseName: ''
			},            	   // 店铺商品
			pageResult: [],
			pageRequest: {pageNum: 1, pageSize: 10},
			totalSize: 0,
			filterColumns: [
				{prop: 'id', label: '序号', minWidth: 80},
				{prop: 'pictureUrl', label: '主图', minWidth: 100, showImg: true},
				{prop: 'chineseName', label: '商品名称', minWidth: 150},
				{prop: 'code', label: '商品编码', minWidth: 120},
				{prop: 'totalStock', label: '总库存', minWidth: 80},
				{prop: 'salePriceWithTax', label: '零售价', minWidth: 100},
				{prop: 'name', label: '商品品牌', minWidth: 120},
				{prop: 'fullNamePath', label: '商品类目', minWidth: 180}
			],
			
			selectProduct: [],                          // 所选商品
			selectStore: [],                         // 所选店铺
			selectCategory: [],                         // 所选类目
			
			filters1: {
				storeName: ''
			},
			pageResult1: [],                            // 选择商家
			pageRequest1: {pageNum: 1, pageSize: 10},
			totalSize1: 0,
		}
	},
	
	mounted() {
		this.queryBehindCategory()
	},
	
	methods: {
		
		// 查询当前用户所有类目
		queryProductByCategoryId: function () {
			let params = {}
			let this_ = this
			this_.utils.request.queryProductByCategoryId(params, function (data) {
				this_.loading = false
				this_.categoryData = data.data
			})
		},
		
		// 查询当前用户所有类目
		queryBehindCategory: function () {
			let params = {}
			let this_ = this
			this_.utils.request.queryBehindCategory(params, function (data) {
				this_.loading = false
				this_.categoryData = data.data
			})
		},
		
		// 类目点击事件
		handleNodeClick(val) {
			this.filters = {}
			this.filters.categoryId = val.id
			this.findPage()
		},
		
		// 查询当前类目所有商品
		findPage: function (params) {
			let this_ = this
			if (this_.filters.categoryId != null && this_.filters.categoryId !== '') {
				if (params == undefined || params == null) {
					params = {
						pageNum: this_.pageRequest.pageNum,
						pageSize: this_.pageRequest.pageSize
					}
				}
				if (this_.filters == undefined || this_.filters == null) {
					this_.filters = {}
				}
				this_.filters.start = params.pageNum
				this_.filters.limit = params.pageSize
				this.utils.request.queryProductByCategoryId(this_.filters, function (res) {
					if (res.code == '0000') {
						this_.pageResult = res.data.rows
						this_.totalSize = Number(res.data.total)
					} else {
						this_.$message({message: '操作失败, ' + res.msg, type: 'error'})
					}
				})
			}
		},
		
		// 查询店铺
		findMerchant() {
			let this_ = this
			this_.filters1.start = this_.pageRequest.pageNum
			this_.filters1.limit = this_.pageRequest.pageSize
			this_.utils.request.queryStoreList(this_.filters1, function (res) {
				if (res.code == '0000') {
					this_.loading1 = false
					this_.pageResult1 = res.data.rows
					this_.totalSize1 = Number(res.data.total)
				}
			})
		},
		
		// 所选店铺的商品
		selectionChange(val) {
			this.selectProduct = val.selections
		},
		
		// 所选店铺
		handleSelectionChangeMerchant(val) {
			this.selectStore = val
		},
		
		// 重置商品
		resetForm() {
			this.filters.chineseName = ''
			this.findPage()
		},
		
		// 重置店铺
		resetMerchant() {
			this.filters1 = {}
			this.findMerchant()
		},
		
		// 下一步
		nextStep() {
			let this_ = this
			this_.selectCategory = this_.$refs.elTree.getCheckedNodes(true, false)
			if (this_.selectProduct.length > 0 || this_.selectCategory.length > 0) {
				this_.elStep = 2
				this_.findMerchant()
			} else {
				this_.$message({message: '请先勾选要分配的商品或者类目', type: 'error'})
			}
		},
		
		// 上一步
		previousStep() {
			this.elStep = 1
		},
		
		// 分配
		stepFinish() {
			let this_ = this
			if (this_.selectStore.length === 0) {
				return this_.$message({message: '请先勾选店铺', type: 'error'})
			}
			let categoryIds = []                        // 所选类目
			let productIds = []                         // 所选商品
			let storeRequestList = []                // 所选商家
			this_.selectCategory.forEach(item => {categoryIds.push(item.id)})
			this_.selectProduct.forEach(item => {productIds.push(item.id)})
			this_.selectStore.forEach(item => {storeRequestList.push({id: item.id, userName: item.storeName})})
			let params = {}
			params.categoryIds = categoryIds
			params.productIds = productIds
			params.storeRequestList = storeRequestList
			this_.utils.request.batchMerchantProduct(params, function (res) {
				if (res.code == '0000') {
					this_.pageResult = []
					this_.totalSize = 0
					this_.pageResult1 = []
					this_.totalSize1 = 0
					this_.selectProduct = []
					this_.selectCategory = []
					this_.elStep = 1
					this_.$message({message: '操作成功', type: 'success'})
				} else {
					this_.$message({message: '操作失败', type: 'error'})
				}
			})
		},
		
		// 店铺类型转化
		typeFormatter: function (row, column, cellValue) {
			if (cellValue == 1) {
				return '线上门店'
			}
		},
		
		// 店铺状态转化
		statusFormatter: function (row, column, cellValue) {
			if (cellValue == 0) {
				return '待审核'
			} else if (cellValue == 1) {
				return '审核通过'
			} else {
				return '审核拒绝'
			}
		},
		
		// 每页数据刷新
		refreshPageRequest: function (pageNum) {
			this.pageRequest.pageNum = pageNum
			this.findPage()
		},
		
		// 每页条数刷新
		handleSizeChange: function (pageSize) {
			this.pageRequest.pageSize = pageSize
			this.findPage()
		},
	}
}
</script>

<style scoped lang="scss">
	.main-context {
		width: 100%;
		height: 100%;
	}
	
	.steps {
		height: 25px;
	}
	
	.tree-title {
		font-size: 18px;
		color: #666666;
		text-align: center;
		margin-bottom: 10px;
		line-height: 60px;
		border-bottom: 2px solid #DCDFE6;
	}
	
	.el-aside-superior {
		height: 760px;
		margin: 5px 20px 0 20px;
		background: #FFF;
		border: 1px solid #DCDFE6;
		-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
		position: relative;
	}
	
	.two-container {
		.header {
      margin-top: 5px;
      height: 175px !important;
			border: 1px solid #DCDFE6;
			
			.header-tool {
				margin-top: 10px;
			}
		}
		
		.main {
			height: 700px;
			border: 1px solid #DCDFE6;
		}
  }
  .noBoder{
    border-bottom: none !important;
  }
</style>
